<template>
	<div class="login-box">
		<div class="login-logo"></div>
		<div class="login-form">
			<h3>动物解刨虚拟仿真实训管理平台</h3>
			<el-form style="margin: 15% 0" size="large"
					  ref="ruleFormRef"
					 :model="ruleForm"
					 :rules="rules">
				<el-form-item prop="loginName">
					<el-input v-model="ruleForm.loginName" :prefix-icon="User" placeholder="请输入登录账号" />
				</el-form-item>
				<el-form-item prop="passWord">
					<el-input v-model="ruleForm.passWord" :prefix-icon="Lock" placeholder="请输入密码" type="password" />
				</el-form-item>
			</el-form>
			<el-button style="width: 100%" type="primary" @click="submitForm(ruleFormRef)">登 录</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
 	import {ref,reactive} from 'vue'
    import { User, Lock } from '@element-plus/icons-vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import { ElNotification } from 'element-plus'
    import { useRouter } from "vue-router";
 	import {userLogin} from "../api/loginMoudles";

    const router = useRouter()
    interface RuleForm {
        loginName: string
        passWord: string
    }
    const ruleFormRef = ref<FormInstance>()
    const rules = reactive<FormRules<RuleForm>>({
        loginName: [
            { required: true, message: '请填写登录账号', trigger: 'blur' },
        ],
        passWord: [
            { required: true, message: '请填写登录密码', trigger: 'blur' },
        ],
    })
    const ruleForm = reactive<RuleForm>({
        loginName:'',
        passWord:''
	})
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
				userLogin(ruleForm).then(res => {
					if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: '登录成功',
                            type: 'success',
                        })
                        sessionStorage.setItem('user', JSON.stringify(res.data.data.user))
                        sessionStorage.setItem('token', res.data.data.tokenInfo.tokenValue)
						router.push('/home')
					}
				})
            } else {
                ElNotification({
                    title: '提 示',
                    message: '请将账户信息填写完整',
                    type: 'error',
                })
            }
        })
    }
</script>

<style scoped lang="less">
	.login-box{
		width: 100vw;
		height: 100vh;
		background: url("../assets/images/loginBanner.png") no-repeat;
		background-size: 100%,100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 15%;
		box-sizing: border-box;
		overflow: hidden;
		.login-logo{
			width: 25vw;
			height: 50vh;
			background: url("../assets/images/loginLogo.png") no-repeat;
			background-size: 100%,100%;
		}
		.login-form{
			width: 20vw;
			background-color: #fff;
			box-shadow:  0 0 8px 5px #8a90cf;
			padding: 2%;
			h3{
				color: #268ae9;
				font-size: 20px;
				text-align: center;
				letter-spacing: 2px;
			}
			.el-button{
				border-radius: 0;
			}
		}
	}
</style>
